<template>
  <div class="dashboard-container" v-if="roleName == '管理员'" >
    <h1>员工信息管理</h1>
    <el-dialog
    title="新增"
    :visible.sync="addButtonController"
    width="30%"
    @close="close('ruleForm')">

    <el-form :rules="roles" label-width="20%" :model="addList" ref="ruleForm">
      <el-form-item label="用户名称" prop="userName">
        <el-input v-model="addList.userName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户名称"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="addList.sex">

          <el-radio label="男" value="男">男</el-radio>
          <el-radio label="女" value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="addList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="addList.idCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
      </el-form-item>
      <el-form-item label="用户密码" prop="userPassWord">
        <el-input v-model="addList.userPassWord" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户密码"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="addList.remark" maxlength="50" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
      </el-form-item>
    </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="add('ruleForm')">确定</el-button>
        <el-button  @click="close('ruleForm')">取消</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="修改"
      :visible.sync="updateButtonController"
      width="30%"
      @close="closeUpdate('ruleForm')"
    >
      <el-form :rules="roles" label-width="20%" :model="updateList" ref="ruleForm">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="updateList.userName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="updateList.sex">
            <el-radio label="男" value="男">男</el-radio>
            <el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="updateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="updateList.idCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassWord">
          <el-input v-model="updateList.userPassWord" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户密码"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="updateList.remark" maxlength="50" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="update('ruleForm')">确定</el-button>
        <el-button  @click="closeUpdate('ruleForm')">取消</el-button>
      </span>
    </el-dialog>

      <!--删除弹窗-->
      <el-dialog
        title="删除员工"
        width="30%"
        :visible.sync="deleteButtonController"
        @close="closeDelete">

        <div style="margin: 10px"><span>请确认是否删除该员工</span></div>

        <span slot="footer" class="dialog-footer">
          <el-button  type="primary" @click="deleteUser">确定</el-button>
          <el-button  @click="closeDelete">取消</el-button>
        </span>
      </el-dialog>


    <el-button  type="primary" style="margin-left: 20%;width: 100px" @click="addButton">新增</el-button>
    <el-input ref="username" v-model="userId2" placeholder="用户ID" name="username" type="text" clearable
              style="margin-left: 40px;width: 180px"/>
    <el-input ref="username" v-model="userName2" placeholder="用户名称" name="username" type="text" clearable
      style="margin-left: 40px;width: 200px"/>

    <el-select v-model="roleName2" clearable placeholder="请选择角色" style="margin-left: 40px;width: 200px">
      <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-button  type="primary" style="margin-left: 40px;width: 100px" @click="selectUser">查询</el-button>
    <el-button  style="margin-left: 40px;width: 100px" @click="checkUser">重置</el-button>


    <el-table :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="659px" border style="width: 100%;margin-top:20px">
      <el-table-column align="center" fixed prop="userId" sortable label="用户ID"/>
      <el-table-column align="center" fixed prop="userName" sortable label="用户名"/>
      <el-table-column align="center" fixed prop="userPassWord" sortable label="用户密码"/>
      <el-table-column align="center" fixed prop="roleName" sortable label="角色"/>
      <el-table-column align="center" fixed prop="sex" sortable label="性别"/>
      <el-table-column align="center" fixed prop="idCard" sortable label="身份证号"/>
      <el-table-column align="center" fixed prop="phoneNumber" sortable label="手机号"/>
      <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
      <el-table-column align="center" fixed label="操作">
        <template v-slot="scope">
          <el-button  type="text"  @click="updateButton(scope.row)">修改</el-button>
          <el-button  type="text"  @click="deleteButton(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top:20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userList.length">
      </el-pagination>
    </div>


<!--    <h1>第一种参数获取:{{userName}}</h1>-->
<!--    <h1>第二种参数获取:{{this.userName}}</h1>-->
  </div>
  <div v-else class="dashboard-container"><h1>无权访问</h1></div>
</template>

<script>
import { mapGetters } from 'vuex'
import {deleteUser, insertUser, selectAllUser, updateUser} from "@/api/user";

export default {
  name: 'users',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data(){
    return{
      currentPage: 1,
      currentIndex: '',
      pagesize: 10,

      userId1: this.$store.getters.userId,
      userName1: this.$store.getters.userName,
      roleName1: this.$store.getters.roleName,
      userId2:'',
      userName2:'',
      roleName2:'',
      roleList: [{
        value: '员工',
        label: '员工'
      }, {
        value: '管理员',
        label: '管理员'
      }],
      userList:[],
      addButtonController:false,
      addList:{
        userName:'',
        userPassWord:'',
        sex:'',
        phoneNumber:'',
        idCard:'',
        remark:''
      },
      updateButtonController:false,
      updateList:{
        userTableId:'',
        userId:'',
        userName:'',
        userPassWord:'',
        sex:'',
        phoneNumber:'',
        idCard:'',
        remark:''
      },
      deleteButtonController:false,
      deleteUserId:'',

      roles:{
        userName: [
          {required:true,trigger:'blur',message:'用户名不能为空'},
          {min:1,max:11,message: '长度在1到11个数字',trigger: 'blur'}
        ],
        phoneNumber:[
          {required:true,trigger:'blur',message:'手机号不能为空'},
          {min:11,max:11,message: '请输入11位手机号',trigger: 'blur'}
        ],
        idCard:[
          {required:true,trigger:'blur',message:'身份证号不能为空'},
          {min:18,max:18,message: '请输入18位身份证号',trigger: 'blur'}
        ],
        userPassWord:[
          {required:true,trigger:'blur',message:'密码不能为空'},
          {min:6,max:20,message: '长度在1到20个字符',trigger: 'blur'}
        ],
        sex:[
          {required:true,trigger:'blur',message:'性别不能为空'},
        ],
      }
    }
  },
  // 页面初始化时加载的方法
  mounted() {
    this.selectUser()
  },
  // 页面的方法和事件
  methods:{
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },


    selectUser(){
      this.currentPage = 1
      selectAllUser({
        userId:this.userId2,
        userName:this.userName2,
        roleName:this.roleName2
      }).then(
        response => {
          console.log(response)
          this.userList=response.data
          console.log(this.userList)
        }
      )
    },
    checkUser(){
      this.userId2=''
      this.userName2 =''
      this.roleName2=''
      this.selectUser()
    },
    addButton(){
      this.addList = {
        userName:'',
        userPassWord:'',
        sex:'',
        phoneNumber:'',
        idCard:'',
        remark:''
      }
      this.addButtonController = true
    },
    updateButton(row){
      this.updateList = {
        userTableId:row.userTableId,
        userId:row.userId,
        roleId:row.roleId,
        userName:row.userName,
        userPassWord:row.userPassWord,
        sex:row.sex,
        phoneNumber:row.phoneNumber,
        idCard:row.idCard,
        remark:row.remark
      }
      this.updateButtonController = true
    },

    deleteButton(row){
      this.deleteUserId = row.userId
      this.deleteButtonController = true
    },


    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertUser({
            userName:this.addList.userName,
            userPassWord:this.addList.userPassWord,
            phoneNumber:this.addList.phoneNumber,
            idCard:this.addList.idCard,
            sex:this.addList.sex,
            remark:this.addList.remark,
          }).then(
            response => {
              this.addButtonController = false
              this.selectUser()
            }
          )
        } else {return false;}});},
    close(formName){
      this.$refs[formName].resetFields();
      this.addButtonController =false
      this.deleteButtonController =false
    },
    closeDelete(){
      this.deleteButtonController =false
    },

    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUser({
            userTableId:this.updateList.userTableId,
            userId:this.updateList.userId,
            roleId:this.updateList.roleId,
            userName:this.updateList.userName,
            userPassWord:this.updateList.userPassWord,
            phoneNumber:this.updateList.phoneNumber,
            idCard:this.updateList.idCard,
            sex:this.updateList.sex,
            remark:this.updateList.remark,
          }).then(
            response => {
              this.updateButtonController = false
              if (this.updateList.userId = this.userId1){
                this.$store.dispatch('user/getInfo')
              }
              this.selectUser()
            }
          )
        } else {return false;}});},
    closeUpdate(formName){
      this.$refs[formName].resetFields();
      this.updateButtonController =false
    },

    deleteUser(formName) {
          deleteUser({
            userId: this.deleteUserId,
          }).then(
            response => {
              this.deleteButtonController = false
              this.selectUser()
            }
          )
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
